<template>
  <div id="rental-car-order-detail">
    <div class="card col-12">
      <div class="card-header my-0 py-0">
        <nav aria-label="breadcrumb" role="navigation">
          <ol class="breadcrumb pb-0">
            <li class="breadcrumb-item">
              <router-link to="/car/orders">租车订单</router-link>
            </li>
            <li class="breadcrumb-item active" aria-current="page">详情</li>
          </ol>
        </nav>
      </div>
    </div>
    <template v-if="detail !== null">
      <div class="card">
        <table class="table table-sm table-striped table-hover">
          <thead>
            <tr>
              <th>订单号</th>
              <th>客户</th>
              <th>成本中心</th>
              <th>项目名称</th>
              <th>预订人</th>
              <th>处理人</th>
              <th>收款方式</th>
              <th>收款备注</th>
              <th>供应商</th>
              <th>支付方式</th>
              <th>收款状态</th>
              <th>服务费</th>
              <th>总金额</th>
              <th>总成本</th>
              <th>利润</th>
              <th>订单状态</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>{{ detail.orderNo }}</td>
              <td>
                {{ detail.customerName }}
                <span class="text-danger">{{ detail.customerCode }}</span>
              </td>
              <td>{{ detail.costCenter }}</td>
              <td>{{ detail.projectName }}</td>
              <td>{{ detail.operator }}</td>
              <td>{{ detail.ticketer }}</td>
              <td>
                {{ getPayTypeDesc(detail.payType) }}
              </td>
              <td>{{ detail.payRemark }}</td>
              <td>
                {{ detail.supplierName }}
              </td>
              <td>
                {{ detail.paymentMethodName }}
              </td>
              <td>
                <span class="text-danger" v-if="detail.payStatus === 0"
                  >未收款</span
                >
                <span class="text-info" v-else-if="detail.payStatus === 1"
                  >已收款</span
                >
                <span class="text-primary" v-else-if="detail.payStatus === 2"
                  >已销账</span
                >
              </td>
              <td>{{ detail.serviceCharge }}</td>
              <td>{{ detail.totalAmount }}</td>
              <td>{{ detail.totalCost }}</td>
              <td>{{ detail.profit }}</td>
              <td>{{ getStatusDesc(detail.status) }}</td>
            </tr>
          </tbody>
        </table>
        <div class="card-body bg-info text-white py-0">用车信息</div>
        <table class="table table-striped table-hover table-sm">
          <thead>
            <tr>
              <th>使用类型</th>
              <th>城市</th>
              <th>机场</th>
              <th>航班号</th>
              <th>使用时间</th>
              <th>出发地址</th>
              <th>到达地址</th>
              <th>车型</th>
              <th>价格</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                {{ showUseTypeDesc(detail.useType) }}
              </td>
              <td>{{ detail.cityName }}</td>
              <td>{{ detail.airportCode }}</td>
              <td>{{ detail.flightNo }}</td>
              <td>{{ detail.useTime }}</td>
              <td>{{ detail.departureAddress }}</td>
              <td>{{ detail.arrivalAddress }}</td>
              <td>{{ detail.vehicleTypeName }}</td>
              <td>
                {{ detail.price }}
                <span v-if="detail.discount > 0">
                  (优惠 {{ detail.discount }})</span
                >
              </td>
            </tr>
          </tbody>
        </table>
        <div class="card-body bg-info text-white py-0">客人信息</div>
        <table class="table table-striped table-hover table-sm">
          <thead>
            <tr>
              <th>姓名</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                {{ detail.passengerName }}
              </td>
            </tr>
          </tbody>
        </table>
        <div class="card-body py-0">
          <ul class="list-inline row">
            <li class="list-inline-item me-auto">备注: {{ detail.remark }}</li>
            <li class="list-inline-item me-auto">
              联系人: {{ detail.linkman }}
            </li>
            <li class="list-inline-item me-auto">
              联系电话: {{ detail.linkPhone }}
            </li>
          </ul>
          <ul class="list-inline row">
            <li class="list-inline-item me-auto">
              价格校验: {{ detail.priceCheckedStatu }},
              {{ detail.priceCheckedTime }}
            </li>
            <li class="list-inline-item me-auto">
              指定审批人: {{ detail.specifiedApprover }}
            </li>
            <li class="list-inline-item me-auto">
              审批结果: {{ detail.approvalStatus }},
              {{ detail.approvalDenyReason }}
            </li>
            <li class="list-inline-item me-auto">
              合规性校验: {{ detail.violationStatus }},
              {{ detail.violationReason }}
            </li>
          </ul>
        </div>
      </div>
      <div class="card">
        <div class="card-body">
          <div
            class="d-flex flex-row justify-content-around"
            v-if="detail.status === 1"
          >
            <button
              class="btn btn-info btn-sm ms-auto me-auto"
              @click.stop="editLinkMan()"
            >
              更改联系人
            </button>
            <button
              class="btn btn-info btn-sm ms-auto me-auto"
              @click.stop="editLinkPhone()"
            >
              更改联系电话
            </button>
            <button
              class="btn btn-info btn-sm ms-auto me-auto"
              @click.stop="editRemark()"
            >
              更改备注
            </button>
            <button
              class="btn btn-info btn-sm ms-auto me-auto"
              @click.stop="editSupplier()"
            >
              更改供应商
            </button>
            <button
              class="btn btn-info btn-sm ms-auto me-auto"
              @click.stop="editPayment()"
            >
              更改支付方式
            </button>
            <button
              class="btn btn-info btn-sm ms-auto me-auto"
              @click.stop="editPrice()"
            >
              修改价格
            </button>
            <button
              class="btn btn-primary btn-sm ms-auto me-auto"
              @click.stop="processOrder()"
            >
              处理订单
            </button>
            <button
              class="btn btn-danger btn-sm ms-autome-auto"
              @click.stop="cancelOrder()"
            >
              取消订单
            </button>
          </div>
          <div
            class="d-flex flex-row justify-content-around"
            v-else-if="detail.status === 2"
          >
            <button
              class="btn btn-info btn-sm ms-auto me-auto"
              @click.stop="editLinkMan()"
            >
              更改联系人
            </button>
            <button
              class="btn btn-info btn-sm ms-auto me-auto"
              @click.stop="editLinkPhone()"
            >
              更改联系电话
            </button>
            <button
              class="btn btn-info btn-sm ms-auto me-auto"
              @click.stop="editRemark()"
            >
              更改备注
            </button>
            <button
              class="btn btn-info btn-sm ms-auto me-auto"
              @click.stop="editSupplier()"
            >
              更改供应商
            </button>
            <button
              class="btn btn-info btn-sm ms-auto me-auto"
              @click.stop="editPayment()"
            >
              更改支付方式
            </button>
            <button
              class="btn btn-info btn-sm ms-auto me-auto"
              @click.stop="editPrice()"
            >
              修改价格
            </button>
            <button
              class="btn btn-primary btn-sm ms-auto me-auto"
              @click.stop="finishOrder()"
            >
              处理完毕
            </button>
            <button
              class="btn btn-danger btn-sm ms-auto me-auto"
              @click.stop="cancelOrder()"
            >
              取消订单
            </button>
          </div>
          <div
            class="d-flex flex-row justify-content-around"
            v-if="detail.status === 8 && detail.payStatus !== 2"
          >
            <button
              class="btn btn-danger btn-sm ms-2"
              @click.stop="rollbackStatus()"
              v-if="isAdmin"
            >
              回滚
            </button>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-header">
          <a
            href="javascript:void(0)"
            class="float-end"
            @click.stop="viewHistory()"
            >查看历史记录</a
          >
        </div>
        <table class="table table-sm table-striped">
          <thead>
            <tr>
              <td>操作员</td>
              <td>内容</td>
              <td>时间</td>
            </tr>
          </thead>
          <tbody>
            <tr v-for="info in histories" :key="`log_` + info.id">
              <td>{{ info.operator }}</td>
              <td>{{ info.content }}</td>
              <td>{{ info.createTime }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </template>

    <my-modal-prompt ref="modalPrompt">
      <span slot="title">{{ modalTitle }}</span>
    </my-modal-prompt>
    <my-modal-vas-price-update
      ref="updateVasPriceModal"
    ></my-modal-vas-price-update>
    <my-modal-supplier-update
      ref="updateSupplierModal"
    ></my-modal-supplier-update>
    <my-modal-pay-method-update
      ref="updatePayMethodModal"
    ></my-modal-pay-method-update>
  </div>
</template>

<script>
import {
  searchRentalCarOrder,
  searchRentalOrderHistory,
  cancelRentalCarOrder,
  showOrderStatusDesc,
  showUseTypeDesc,
  updateRentalOrderPrice,
  updateRentalOrderSupplier,
  updateRentalOrderPayment,
  processRentalCarOrder,
  finishRentalCarOrder,
  updateRentalCarOrder,
} from "@/api/rentalcar.js";
import { rollbackRentalCarOrderStatus } from "@/api/admin.js";
import { showPayType } from "@/common/common.js";
import MyModalVasPriceUpdate from "@/components/modal/my-modal-vas-price-update.vue";
import MyModalSupplierUpdate from "@/components/modal/my-modal-supplier-update-v2.vue";
import MyModalPayMethodUpdate from "@/components/modal/my-modal-pay-method-update.vue";
import MyModalPrompt from "@/components/modal/my-modal-prompt.vue";

export default {
  components: {
    MyModalVasPriceUpdate,
    MyModalSupplierUpdate,
    MyModalPayMethodUpdate,
    MyModalPrompt,
  },
  data() {
    return {
      modalTitle: "",

      detail: null,
      id: 0,
      histories: [],
    };
  },
  computed: {
    isAdmin() {
      return this.$store.getters.isAdmin;
    },
  },
  mounted: function () {
    this.id = this.$route.params.id;
    this.search();
  },
  methods: {
    back: function () {
      this.$router.go(-1);
    },
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    search: function () {
      searchRentalCarOrder(this.id, (v) => {
        this.detail = v;
      });
    },
    getStatusDesc: function (status) {
      return showOrderStatusDesc(status);
    },
    showUseTypeDesc: function (status) {
      return showUseTypeDesc(status);
    },
    viewHistory: function () {
      searchRentalOrderHistory(this.id, (jsonResult) => {
        this.histories = jsonResult;
      });
    },
    commonShowMessage: function (jsonResult) {
      if (jsonResult.status !== "OK") {
        this.showErrMsg("操作失败：" + jsonResult.errmsg, "danger");
      } else {
        if (jsonResult.desc !== "") {
          this.showErrMsg(jsonResult.desc);
        } else {
          this.showErrMsg("操作成功");
        }
        this.search();
      }
    },
    getPayTypeDesc: function (payType) {
      return showPayType(payType);
    },
    cancelOrder: function () {
      cancelRentalCarOrder(this.id, (v) => this.commonShowMessage(v));
    },
    editPrice: function () {
      this.$refs.updateVasPriceModal
        .modal(this.detail.price, this.detail.discount, this.detail.cost)
        .then((v) => this.doUpdatePrice(v))
        .catch(() => {});
    },
    doUpdatePrice: function (v) {
      const params = {
        price: v.price,
        discount: v.discount,
        cost: v.cost,
      };

      console.log(params);

      updateRentalOrderPrice(this.id, params, (v) => this.commonShowMessage(v));
    },
    processOrder: function () {
      processRentalCarOrder(this.id, (v) => this.commonShowMessage(v));
    },
    finishOrder: function () {
      this.modalTitle = "请输入备注：";
      const promise = this.$refs.modalPrompt.modal();
      promise
        .then((remark) => {
          if (remark === "") {
            return;
          }
          finishRentalCarOrder(this.id, { remark }, (v) =>
            this.commonShowMessage(v)
          );
        })
        .catch((r) => {});
    },
    editLinkMan: function () {
      this.modalTitle = "修改联系人为";
      const promise = this.$refs.modalPrompt.modal();
      promise
        .then((remark) => {
          if (remark === "") {
            return;
          }
          const params = {
            contentType: 1,
            content: remark,
          };
          updateRentalCarOrder(this.id, params, (v) =>
            this.commonShowMessage(v)
          );
        })
        .catch((r) => {});
    },
    editLinkPhone: function () {
      this.modalTitle = "修改联系电话为";
      const promise = this.$refs.modalPrompt.modal();
      promise
        .then((remark) => {
          if (remark === "") {
            return;
          }
          const params = {
            contentType: 2,
            content: remark,
          };
          updateRentalCarOrder(this.id, params, (v) =>
            this.commonShowMessage(v)
          );
        })
        .catch((r) => {});
    },
    editRemark: function () {
      this.modalTitle = "修改备注为";
      const promise = this.$refs.modalPrompt.modal();
      promise
        .then((remark) => {
          if (remark === "") {
            return;
          }
          const params = {
            contentType: 3,
            content: remark,
          };
          updateRentalCarOrder(this.id, params, (v) =>
            this.commonShowMessage(v)
          );
        })
        .catch((r) => {});
    },
    editSupplier: function () {
      const promise = this.$refs.updateSupplierModal.modal(
        this.supplierId,
        this.payMethodId
      );
      promise
        .then((info) => {
          this.doUpdateSupplier(info.supplierId, info.paymentMethodId);
        })
        .catch(() => {
          // this.showErrMsg('canceled')
        });
    },
    doUpdateSupplier: function (supplierId, paymentMethodId) {
      const params = {
        supplierId: supplierId,
        paymentMethodId: paymentMethodId,
      };

      updateRentalOrderSupplier(this.id, params, (v) =>
        this.commonShowMessage(v)
      );
    },
    editPayment: function () {
      this.$refs.updatePayMethodModal
        .modal(this.payMethodId)
        .then((info) => {
          updateRentalOrderPayment(
            this.id,
            { paymentMethodId: info.payMethodId },
            (v) => this.commonShowMessage(v)
          );
        })
        .catch((ex) => {});
    },
    rollbackStatus: function () {
      this.modalTitle = "确定将订单状态回滚吗？并请输入理由：";

      this.$refs.modalPrompt
        .modal()
        .then((remark) => {
          rollbackRentalCarOrderStatus(this.id, { remark }, (v) =>
            this.commonShowMessage(v)
          );
        })
        .catch((ex) => {
          console.log(ex);
        });
    },
  },
};
// 530
</script>